<template>
    <lay-container fluid="true" class="user-box">

    <div style="display: flex">
      <div :style="{ width: isFold ? `0px` : `300px` }" class="left-tree">

        <lay-tree v-show="!isFold" :data="data" :showLine="showLine" @node-click="getdic"
      >
          <template #title="{ data }">
            <span :class="config.selectedKey == data.id ? 'isChecked' : ''">
              {{ data.title }}
            </span>
          </template>
        </lay-tree>
        <div class="isFold" @click="isFold = !isFold">
          &nbsp;<lay-icon v-if="!isFold" class="layui-icon-left"></lay-icon>
          <lay-icon v-else class="layui-icon-right"></lay-icon>
        </div>
      </div>

      <div  style="flex: 1; padding: 10px; overflow: auto;height:  calc(100vh - 110px)">
<div class="table-box">
  <lay-table :loading="config.loading" :columns="config.columns" :page="config.page" @change="change"
          :data-source="config.data"   v-model:selectedKey="config.selectedKey" v-model:selectedKeys="config.selectedKeys" class="project-grids">

          <template #toolbar>
            <lay-input v-model="config.search.title" size="sm" placeholder="搜索" suffix-icon="layui-icon-search"
              style="width: 20%;"></lay-input>

            <lay-button-group v-for="n in listbutton.toolbarbuttons" :key="n">
              <lay-button :size="n.size" :type="n.status" border-style="dashed" @click="Events(n, null)"> {{ n.name
                }}</lay-button>
            </lay-button-group>
          </template>
          <template v-slot:operator="{ row }">
            <span v-for="n in listbutton.rowbuttons" :key="n">
              <lay-tooltip :content="n.name" position="bottom" :is-dark="true">
                <button class="a-button type--button is--circle" circle @click="Events(n, row)">
                  <lay-icon :type="n.icon" :color="n.color">

                  </lay-icon>
                </button>
              </lay-tooltip>

            </span>

          </template>
          <template #status="{ row }">
            <div>
              {{ getstatus(row.status) }}
            </div>

          </template>
          <template #sex="{ row }">
            <div>
              {{ getsex(row.sex) }}
            </div>

          </template>
          <template #type="{ row }">
                            <div>
                                {{ gettype(row.type) }}
                            </div>
                           
                       </template>
                       <template #nation="{ row }">
                            <div>
                                {{ getnationtype(row.nation) }}
                            </div>
                           
                       </template>
        </lay-table>
</div>
 


      </div>
    </div>


</lay-container>
</template>

<script lang="ts" setup>
import webosutils from 'webosutils';
import { layer } from '@layui/layer-vue'
import { useRouter, useRoute } from 'vue-router';
import utils from '../../utils/utils';
import { LayerForm} from 'webos-form-design';
import listurils from '../../utils/listutils';
import { ref } from 'vue';
const showLine = ref(false);
const data = ref([]);
const router = useRouter();
const isFold = ref(false);
const route = useRoute();
const typelist = ref<any>([]);
const listbutton = ref({
  rowbuttons: [] as any,
  toolbarbuttons: [] as any,
});
const size = ref("sm");
const config = ref({
  loading: true,
  data: [],
  selectedKey:"",
  selectedKeys:[],
  page: {
    total: 0,
    limit: 10,
    current: 1,
    showRefresh: true,

    limits: [5, 10, 20, 50, 100, 200]
  },
  columns: [
  { title: "选项", width: "50px", type: "checkbox", fixed: "left" },
    { key: 'account', title: '账号' },
    { key: 'name', title: '姓名', },
    { key: 'jobid', title: '工号', },
    { key: 'status', title: '状态', customSlot: "status" },
    { key: 'sex', title: '性别', customSlot: "sex" },
    { key: 'type', title: '分类', customSlot: "type", ellipsisTooltip: true },
    { key: 'nation', title: '是否支持回餐', customSlot: "nation", ellipsisTooltip: true },
    {
      title: "操作",
      width: "150px",
      fixed: "right",
      customSlot: "operator",
      key: "operator"
    }
  ],
  api: "",
  search: {
    id: "",
    title: ""
  }
});
const gettype=(t:any)=>{
	var usertype = typelist.value.find((x: any) => x.id == t);
    if(usertype!=null){
        return usertype.title;
    }else{
        return "未知";
    }
}
const getnationtype=(t:any)=>{
if(t==1){
  return "不支持";
}else{
  return "支持";
}
}
const getstatus = (f: any) => {
  f = f + "";
  switch (f) {


    case '0':
      return '正常';
    case '1':
      return '冻结';

    default:
      return '未知';
  }
}
const getsex = (f: any) => {
  f = f + "";
  switch (f) {


    case '0':
      return '男';
    case '1':
      return '女';

    default:
      return '未知';
  }
}
listurils.getButton(route.query.appid, config, listbutton).then((res: any) => {
  //加载完成后刷新列表

  if (res.success) {
    config.value.api = res.data.api;
    if (listbutton.value.toolbarbuttons.length > 0) {
      size.value = listbutton.value.toolbarbuttons[0].size;
    }
    listurils.searchEvent(config);
  } else {
    layer.notify({
      title: "Error",
      content: res.msg,
      icon: 2
    })
  }

});
const getdic = (item: any) => {
  config.value.search.id = item.id;
  listurils.searchEvent(config);
}

const change = (p: any) => {

  config.value.page.current = p.current;
  config.value.page.limit = p.limit;
  listurils.searchEvent(config);
}
const findList = () => {

  var page: any, limt: any;

  page = config.value.page.current;
  limt = config.value.page.limit;
  config.value.loading = true;
  webosutils.http.post("/v1/api/department/getDepartmentById", { id: '00000000-0000-0000-0000-000000000000', page: page, limit: limt }).then((res: any) => {
    config.value.loading = false;

    if (res.success) {
      data.value = res.data;
      // config.value.page.tota = res.count
      //  if(treeExpandRecords.value.length>0){
      //   setTimeout(()=>{
      //     const $table = xdTable.value as any;
      //   $table.setTreeExpand(treeExpandRecords.value,false);
      //   },1000);

      //  }
    }
  });

}

findList();

const getUsertype = () => {
	//
   if(typelist.value.length==0){
webosutils.	http.post("/v1/api/form/GetDictionaryByCode", { id: "dw_user_type" }).then((res: any) => {
		if (res.success) {

			typelist.value = res.data;
		}
	}).catch(err => {
		console.log(err);
	})
}
}
getUsertype();
//标段保存回调返回结果
const Callback = (res: any) => {
  if (res.success) {
    listurils.searchEvent(config);
   // findList();

  } else {
    layer.notify({ title: "温馨提示", content: res.msg })
  }

}


const Events = (ent: any, row: any) => {
  try {

    switch (ent.events) {
      case "editEvent":
        if (ent.ispopup == 0) {
          var query = new Object() as any;
          query.fromid = ent.formid;
          query.instanceid = row.instanceid;
          query.zhuanti = row.classid;
          query.tabname = encodeURIComponent(row.title);
          router.push({ path: "/formdesign/submitfrom", query: query })


        } else {
          let param = new Object() as any;
          if (ent.param != null && ent.param != '') {
            try {
              let para = JSON.parse(ent.param);
               ;
              Object.keys(para).forEach(key => {
                param[key] = row[key];
              });
            } catch (e) {
              layer.notify({ title: "温馨提示", content: "配置的参数存在问题！" });
              return;

            }

          }
          listurils.editRowEvent(LayerForm, ent, row, { fromid: ent.formid, instanceid: row.id, callback: Callback }, param);

        }
        break;
      case "searchEvent":
        if (config.value.page) {
          listurils.searchEvent(config);
        }

        break;
      case "deleteEvent": listurils.removeRowEvent(ent, row, listurils.searchEvent, config);
        break;
      case "addEvent":
        if (ent.ispopup == 0) {
          var query = new Object() as any;
          query.fromid = ent.formid;
          query.instanceid = "";
          query.zhuanti = route.query.zhuanti;
          query.tabname = encodeURIComponent(ent.title);
          router.push({ path: ent.api, query: query })

        } else {
          if(config.value.search.id==""){
            layer.notify({ title: "温馨提示", content: "请先选择部！" });
            return;
          }
          listurils.addEvent(LayerForm, ent, { fromid: ent.formid, instanceid: "", callback: Callback }, { organizeid: config.value.search.id });

        }
        break;

      case "previewEvent": listurils.previewEvent(LayerForm, ent, row);
        break;
        case "SelectEvent":
                listurils.SelectEvent(ent, row, listurils.searchEvent, config);
                break;
    }
  } catch (e) {
    layer.msg("按钮解析失败", { icon: 3, time: 1000 })
  }

}
</script>

<style scoped>
.user-box {
    /* width: calc(100vw - 240px); */
  height: calc(100vh - 110px);
  margin-top: 10px;
  box-sizing: border-box;
  background-color: #fff;
  overflow: hidden;
}

.left-tree {
  display: inline-block;
  padding: 20px 15px 0 5px;
  height: 1200px;
  border-right: 1px solid #e6e6e6;
  box-sizing: border-box;
  position: relative;
}

/* todo layui-tree-entry 设置无效 */
.layui-tree-entry {
  /* position: relative; */
  padding: 10px 0;
  height: 20px;
  line-height: 20px;
  white-space: nowrap;
}

.isFold {
  position: absolute;
  top: 36%;
  right: -10px;
  width: 26px;
  height: 26px;
  line-height: 26px;
  border-radius: 13px;
  background-color: #fff;
  border: 1px solid #e6e6e6;
  cursor: pointer;
}

.search-input {
  display: inline-block;
  width: 98%;
  margin-right: 10px;
}

.isChecked {
  display: inline-block;
  background-color: #e8f1ff;
  color: red;
}
</style>